<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字数计算</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        .box{
            width: 500px;
            margin:0 auto;
        }
        .content{
            line-height: 30px;
        }
        .right{
            float: right;
        }
        .right strong{
            font-size: 26px;
            color: orange;
        }
        .input .text{
            width:100%;
            height: 120px;
            resize: none;
            border:1px solid #aaa;
            box-shadow: 0 0 5px #ccc inset;
            padding:10px;
            font-size: 16px;
        }
        .text:focus{
            border-color: #f93;
            outline: none;
            border: 2px solid #ff9933;
            box-shadow: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <span>有什么新鲜事想告诉大家？</span>
            <span class="right">可以发布超过<strong>140</strong>字的微博啦</span>
        </div>
        <div class="input">
            <textarea class="text"></textarea>
        </div>
    </div>
</body>
</html>
<script>
    //输入内容时计算字数
    $('.text').keyup(textNum);
    //获取焦点计算字数
    $('.text').focus(textNum);

    //计算字数的方法
    function textNum() {
        //获取输入字符长度
        var length = $(this).val().length;
        //输入文字的总长度
        var currentLength = 0;
        if(length > 0){
            for(var i=0; i<length; i++){
                if($(this).val().charCodeAt(i) > 255){
                    //就是中文字符
                    currentLength +=1;
                }else{
                    //英文字符
                    currentLength +=0.5;
                }
            }
            console.log(currentLength);

        }
        var result = Math.ceil(currentLength);
        if(result<140){
            $('.right').html('已输入<strong style="color: gray">'+result+'</strong>字');
        }else {
            $('.right').html('已输入<strong style="color: orange">'+result+'</strong>字');
        }
    }
</script>